import React, {Component} from 'react'
import { Row, Col, Card, Checkbox} from "antd";
import {getDeliverByGoodId,getPic} from "@/api/api";
import Map from '@/components/map';
import {withRouter} from 'react-router-dom'
import * as L from 'leaflet'
//客户管理
class resultView extends Component {
    componentWillReceiveProps(nextProps) {
        !nextProps.visible && this.props.form.resetFields();
    }
    constructor(props) {
        super(props);
        this.state = {
            goodId: '',
            treeArr: []
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps);
        return true;
    }
    componentDidMount() {
        let id = ''
        if (this.props.location.query) {
            id = this.props.location.query.id
            sessionStorage.setItem('id', id);// 存入到sessionStorage中
        } else {
            id = sessionStorage.getItem('id');
        }
        this.getLeftTree({goodId: id})

    }
    onRef = (name, ref) => {
        console.log(ref)
        this.Map=null
        this.Map = ref
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return
        }
    }
    getLeftTree(params) {
        getDeliverByGoodId(params).then(res => {
            if (res.code === 0) {
                let treeData = res.data
                treeData.forEach(item => {
                    item.checked = false
                })
                this.setState({
                    treeArr: treeData
                })

            }
        })
    }
    changeItem = (item,index) =>{
        this.state.treeArr[index].checked=!this.state.treeArr[index].checked
        this.setState({
            checked:this.state.treeArr[index].checked
        })
        if(item.type==='wmts'){
            if (item.checked) {
                const layer = item.uri.split('/?LAYER=')[1]
                const layerinfo = {
                    serviceType: 'wmts',
                    name: item.name,
                    url: item.uri,
                    orgin: [90, -180],
                    layer: layer,
                    attribution: '边界'
                }
                console.log(layerinfo)
                this.Map.addMapLayer(layerinfo)
                this.Map.state.myMap.getMap().fitBounds(L.latLngBounds(L.latLng(item.layerBottom, item.layerLeft), L.latLng(item.layerTop, item.layerRight)))
            }else{
                this.Map.removeLayer()
                this.Map.fullMap()
            }
        }else{
            console.log(item.uri)
            if(item.checked){
                getPic(item.uri, {}).then(res => {
                    console.log(res)
                    // this.resultImg = res
                })
            }else{
            }
        }
    }
    render() {
        const cardArr = this.state.treeArr.map((item, index) =>
            <Card title={item.type == 'wmts' ? 'WMTS数据' : '图片数据'} style={{height: '120px', marginBottom: '10px',width:'100%'}}
                  bordered={true} key={index}>
                <div className="ant-table-wrapper">
                    <div className="step-form-style-desc">
                        <Checkbox key={index} check={item.checked}  onChange={(checkedValues) => {
                            this.changeItem(item,index);
                        }}>
                            {item.name}
                        </Checkbox>
                    </div>
                </div>
            </Card>
        )
        return (
            <div className="site-card-wrapper ">
                <Row gutter={20}>
                    <Col span={6}>
                        {cardArr}
                    </Col>
                    <Col span={18} ><Map  onRef={this.onRef.bind(this)}></Map></Col>
                </Row>
            </div>

        )
    }
}

export default withRouter(resultView)
// export default Form.create()(resultView);